{% extends 'base.html' %}
{% block title %}用户登录{% endblock %}

{% block content %}
<script src="/static/js/localcache.js"></script>
<script src="/static/js/user_data.js"></script>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-5">
            <div class="card shadow-sm mt-5">
                <div class="card-body">
                    <h2 class="text-center my-4">登录系统</h2>
                    <form class="form-control" method="post" action="{{ url_for('user.login') }}">
                        <input type="hidden" id="csrf_token" name="csrf_token" value="{{ csrf_token }}">
                        
                        <div class="mb-3">
                            <label for="login_id" class="form-label">用户名/邮箱/手机号 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="login_id" name="login_id" 
                                   placeholder="请输入用户名、邮箱或手机号" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="password" class="form-label">密码 <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" id="password" name="password" value="123456"  
                                   placeholder="请输入密码" required>
                        </div>
                        
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="remember_me" name="remember_me" checked>
                            <label class="form-check-label" for="remember_me">记住我</label>
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">登录</button>
                        </div>
                        
                        <div class="mt-3 text-center">
                            <p>还没有账号？<a href="{{ url_for('user.register') }}" class="text-decoration-none">立即注册</a></p>
                            <p><a href="#" class="text-decoration-none">忘记密码？</a></p>
                        </div>
                    </form>
                    <div id="sussess_mess" class="alert alert-success mt-3 d-none" role="alert">
                        <p>登录成功，跳转 <a href="{{ url_for('bbs.bbsindex') }}">论坛首页.....</a></p>
                    </div>
                    <div id="error_mess" class="alert alert-danger mt-3 d-none" role="alert">
                        <p>登录失败，原因：.....</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    /**
    * 登录成功后，3秒后跳转到论坛首页
    * 程序逻辑：
    * 1. 从后端获取到user_data数据
    * 2. 如果user_data数据不为空，
    *       - 则表示登录成功，显示登录成功提示信息，隐藏form表单
    *       - 并在3秒后跳转到论坛首页, 
    *       - 使用UserDataCache.saveUserData，用户信息保存到本地
    *    否则显示登录失败提示信息
    */
    document.addEventListener('DOMContentLoaded', async function() {
        // 获取页面中的用户数据(如果存在)
        const userDataElement = document.querySelector('user_data');
        let userData = null;
        
        // 尝试获取后端传递的user_data
        userData = {{ user_data|tojson if user_data else 'null' }};
        
        const loginForm = document.querySelector('form');
        const successMessage = document.getElementById('sussess_mess');
        const errorMessage = document.getElementById('error_mess');


        // 如果有用户数据，并且登录成功
        if (userData && userData.success) {
            // 隐藏登录表单
            loginForm.classList.add('d-none');
            
            // 显示成功消息
            successMessage.classList.remove('d-none');
            
            try {
                // 保存用户数据到本地缓存
                await UserDataCache.saveUserData(userData);
                
                // 3秒后跳转到论坛首页
                //setTimeout(() => {
                    //window.location.href = "{{ url_for('bbs.bbsindex') }}";
                //}, 3000);
            } catch (error) {
                console.error('保存用户数据失败:', error, userData);
                
                // 即使保存失败也跳转，但记录错误
                //setTimeout(() => {
                    //window.location.href = "{{ url_for('bbs.bbsindex') }}";
                //}, 3000);
            }
        } else if (userData && !userData.success) {
            // 登录失败，显示错误信息
            errorMessage.innerHTML = `<p>登录失败，原因：${userData.message || '未知错误'}</p>`;
            errorMessage.classList.remove('d-none');
        }
        
    });
</script>

{% endblock %}